<template>
	<view class="content" v-if="showPage">
		<view class="input-v">
			<uni-search-bar :radius="100" @confirm="search"></uni-search-bar>
		</view>
		
		<view class="other">
			<view class="item ms-v" @click="toList(3)">
				<image src="../../../static/img/taoke/sn-jx.png" mode="widthFix"></image>
				<view>精选好物</view>
			</view>
			<view class="item ms-v" @click="toList(4)">
				<image src="../../../static/img/taoke/sn-bk.png" mode="widthFix"></image>
				<view>热门爆款</view>
			</view>
			<view class="item ms-v" @click="toList(6)">
				<image src="../../../static/img/taoke/sn-sh.png" mode="widthFix"></image>
				<view>实惠专区</view>
			</view>
		</view>
		
		<view></view>
		
		<view class="listGoods">
			<view class="item"  @click="toLookDetail(item.item_picture,item.item_title,item.coupon_price,item.item_final_price,item.seller_name,item.item_small_pictures,item.item_url,item.item_volume)"  v-for="(item, index) in list" :key="index" >
				<image  :src="item.item_picture"></image>
				<view class="item-bottom">
					<view class="desc"><text class="jdlogo">苏宁</text> {{item.item_title}}</view>
					<view class="name_ticket">
						<text class="shopName">{{item.seller_name == null?'':item.seller_name}}</text>
						<text class="ticket" v-show="item.coupon_price != null">券 | {{item.coupon_price == null?0:item.coupon_price}}元</text>
					</view>
					<view class="afterTicket"><text class="num1">券后</text><text class="num3">&yen;{{item.item_final_price}}</text><text class="num2">&yen;{{item.item_price}}</text></view>
				</view>
			</view>
		</view>
		
		<view class="getMore" v-if="list.length>0">加载更多数据...</view>
		
	</view>
</template>

<script>
    export default {
        data() {
            return {
				showPage:false,
				list:[],
				page:1,
				type:2
            }
        },
        methods: {
			search(val){
				uni.navigateTo({
					url: 'list?listType=2&searchVal='+ val.value
				});
			},
			toLookDetail(item_picture,item_title,coupon_price,item_final_price,seller_name,item_small_pictures,item_url,item_volume){
					
					uni.showLoading({
					    title: '跳转中...'
					});
					
					// for (var i = 0; i < item_small_pictures.length; i++) {
					// 	item_small_pictures[i] = item_small_pictures[i].replace('_200w_200h_4e','');
					// }
					//储存详情图
					// uni.setStorageSync('pddItem_small_pictures',item_small_pictures);
					uni.navigateTo({
						url: 'detail?item_picture='+item_picture+'&item_title='+item_title+'&coupon_price='+coupon_price+'&item_final_price='+item_final_price+'&seller_name='+seller_name+'&item_url='+item_url+'&item_volume='+item_volume
					});
			},
			toList(listType){
				uni.navigateTo({
					url: 'list?listType='+listType
				});
			},getInitData(page){
					this.type = 2;//实时热销榜
					let opts = {
						url: 'snUnion/getRecommend/'+page+'/'+this.type,
						method: 'get'
					};
					let param = {
					};
					this.tokenRequest(opts, param).then(res => {
						uni.hideLoading();
						this.showPage = true;
						let rData = res.data;
						for (var i = 0; i < rData.length; i++) {
							rData[i].coupon_price = parseFloat(rData[i].coupon_price);
							rData[i].item_final_price = parseFloat(rData[i].item_final_price);
							rData[i].item_price = parseFloat(rData[i].item_price);
							rData[i].item_picture = rData[i].item_picture.replace('_200w_200h_4e','');
							this.list.push(rData[i]);
						}
					}, error => {})
			}
        },onLoad() {
			this.page = 1;
        	this.getInitData(this.page);
        },onReachBottom() {
        	this.page++;
			this.getInitData(this.page);
        }
    }
		
</script>

<style>
	/* ⬇️ 列表详情 */
	.listGoods{
		color: #555555;
		display: flex;
		flex-wrap: wrap;
		font-size: 30rpx;
	}
	.listGoods image{
		display: block;
		width: 350rpx;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
		height: 350rpx;
	}
	.listGoods .item{
		width: 350rpx;
		border-radius: 15rpx;
		background-color: #fff;
		height: 600rpx;
		margin-left: 18rpx;
		margin-top: 18rpx;
	}
	.listGoods .afterTicket{
		margin-top: 10rpx; 
	}
	.afterTicket .num1{
		color: #ED1941;
		font-weight: 800;
		font-size: 26rpx;
		margin-right: 10rpx;
	}
	.name_ticket{
		height: 80rpx;
	}
	.afterTicket .num2{
		color: #888;
		font-size: 22rpx;
		text-decoration:line-through;
		margin-left: 15rpx;
	}
	
	.afterTicket .num3{
		color: #ED1941;
		font-size: 33rpx;
		font-weight: 800;
	}
	
	
	.listGoods .item-bottom{
		padding: 20rpx;
	}
	.listGoods .ticket{
		background-color: #DD524D;
		color: #fff;
		font-size: 20rpx;
		height: 30rpx;
		border-radius: 8rpx;
		padding: 0rpx 8rpx;
	}
	.listGoods .shopName{
		color: #888888;
		font-size: 22rpx;
		display: -webkit-box;
		width: 300rpx;
		height: 30rpx;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		margin-top: 5rpx;
		margin-bottom: 5rpx;
	}
	.listGoods .desc{
		overflow: hidden;
		height: 80rpx;
		color:#333333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	/* ⬆️ 列表详情 */
	
	.input-v{
		background-color: #e98f36;
	}
	.other{
		background-color: #fff;
		padding: 20rpx;
		border-radius: 15rpx;
		margin: 20rpx;
		font-size: 28rpx;
		display: flex;
	}
	.other .item{
		width: 120rpx;
		height: 150rpx;
		margin-right: 30rpx;
	}
	.other image{
		width: 100rpx;
		height: 100rpx;
	}
</style>
